<template>
  <div class="box">
    <a-form
      :model="formState"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 24 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        name="username"
        :rules="[
          {
            required: true,
            whitespace: true,
            message: '账号不能为空!!!!',
          },
        ]"
      >
        <a-input v-model:value="formState.username" placeholder="工号" />
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[
          {
            required: true,
            whitespace: true,
            message: '密码请正确输入',
          },
        ]"
      >
        <a-input-password
          v-model:value="formState.password"
          placeholder="密码"
        />
      </a-form-item>

      <a-form-item
        name="auth"
        :rules="[
          {
            required: true,
            whitespace: true,
            message: '请输入验证码',
          },
        ]"
      >
        <a-input v-model:value="formState.auth" placeholder="请输入验证码" />
      </a-form-item>

      <a-form-item name="remember" :wrapper-col="{ offset: 0, span: 24 }">
        <a-checkbox v-model:checked="formState.remember">保存密码</a-checkbox>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a class="login-form-forgot" href="">忘记密码</a>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 0, span: 24 }">
        <a-button type="primary" html-type="submit" class="login-form-button">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { message } from "ant-design-vue";
import { reactive } from "vue";
import { loginApi } from "@/api/userApi";
import { useRouter } from "vue-router";

// 暂存起来
import useUserStore from "@/store/common";
const userStore = useUserStore();

// 状态管理
const router = useRouter();

const formState = reactive({
  username: "",
  password: "",
  auth: "",
  remember: true,
});
// 表单验证成功
const onFinish = async (userData) => {
  // console.log(userData)
  let ret = await loginApi(userData);
  // console.log(ret);
  if (ret.code === 0) {
    // 登录成功,状态存储在当前的全局状态中
    userStore.setUser(ret.data);
    // 跳转
    router.replace("/dashoard");
    return;
  }
  message.error("This is a warning message");
};

// 表单验证失败
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};

</script>

<style lang="scss" scoped>
.box {
  /* width: 400px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 100px auto;
  border-radius: 5px; */
}
.login-form-button {
  width: 100%;
}
</style>
